<template>
  <div class="my-center">
    <!-- 头部 -->
    <div class="hd-nav">
      <span>我的</span>
    </div>
    <!-- 内容区  -->
    <div class="cen-container">
      <div class="cen-pic">
        <div class="pic-top">
          <img src="../assets/imgs/13.jpeg" alt="" />
          <div class="user-data">
            <div>
              <span class="user-1">@muYun</span>
              <span class="user-2"
                >开通会员
                <i class="iconfont icon-xiangyou1"></i>
              </span>
            </div>
            <p>编辑个人资料</p>
          </div>
        </div>
        <ul class="pic-bottom">
          <li>
            <span class="bottom-1">0</span>
            <span class="bottom-2">获赞</span>
          </li>
          <li>
            <span class="bottom-1">0</span>
            <span class="bottom-2">关注</span>
          </li>
          <li>
            <span class="bottom-1">0</span>
            <span class="bottom-2">粉丝</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 我的句库 -->
    <div class="cen-sentence">
      <div class="cen-text">
        <div class="cen-title">
          <p>我的句库</p>
        </div>
        <ul class="text-list">
          <li>
            <router-link to="/mysend">
              <i class="iconfont icon-icon_fabu"></i>
              <span class="bgCor">我的发布</span>
            </router-link>
          </li>
          <li >
            <router-link to="/mylove">
              <i class="iconfont icon-xihuan bgCor"></i>
              <span class="bgCor">我的喜欢</span>
            </router-link>
          </li>
          <li>
            <i class="iconfont icon-huati"></i>
            <span>我的专辑</span>
          </li>
          <li>
            <i class="iconfont icon-biaoqian"></i>
            <span>我的收藏</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="cen-fun">
      <div>
        <ul>
          <li>
            <i class="iconfont icon-caogaoxiang"></i>
            <span>我的草稿</span>
          </li>
          <li>
            <i class="iconfont icon-zuijinliulan"></i>
            <span>最近浏览</span>
          </li>
          <li>
            <i class="iconfont icon-canyuqingkuang"></i>
            <span>我的参与</span>
          </li>
          <li>
            <i class="iconfont icon-biaoqian"></i>
            <span>我的话题</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部 -->
    <comp-footer></comp-footer>
  </div>
</template>
<script>
import compFooter from "../components/comp-footer.vue";
export default {
  name: "myCenter",
  components: {
    compFooter,
  },
};
</script>

<style lang="scss" scoped>
.my-center {
  background: #f8f8f8 !important;
  width: 100%;
  height: 800px;
}
.hd-nav {
  z-index: 99;
  width: 100%;
  height: 46px;
  background: #7ab4ff;
  position: fixed;
  left: 0;
  top: 0;
  span {
    height: 46px;
    line-height: 46px;
    margin-left: 20px;
    font-size: 18px;
    color: #fff;
  }
}
// 个人中心
.cen-container {
  padding-top: 46px;
  .cen-pic {
    width: 312px;
    height: 125px;
    background: #ffffff;
    border-radius: 5px;
    padding: 20px 15px;
    margin: 16px auto;
    box-shadow: 0 0 8px #ccc;
    .pic-top {
      display: flex;
      justify-content: space-between;
      img {
        width: 65px;
        height: 65px;
        border-radius: 50%;
      }
      .user-data {
        width: 235px;
        height: 80px;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        div {
          display: flex;
          justify-content: space-between;
          .user-1 {
            font-size: 14px;
          }
          .user-2 {
            background-color: #443e3b;
            font-size: 12px;
            color: #dab68c;
            line-height: 18px;
            height: 18px;
            border-radius: 10px;
            padding: 1px 3px 1px 7px;

            i {
              font-size: 16px;
              vertical-align: middle;
            }
          }
        }
        p {
          font-size: 12px;
          color: #999999;
        }
      }
    }
    .pic-bottom {
      border-top: 2px solid #ddd;
      width: 100%;
      height: 58px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      li {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        height: 58px;
        .bottom-1 {
          font-size: 16px;
        }
        .bottom-2 {
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }
}
// 我的句库
.cen-sentence {
  .cen-text {
    width: 312px;
    height: 120px;
    background: #ffffff;
    border-radius: 5px;
    padding: 20px 15px;
    margin: 16px auto;
    box-shadow: 0 0 3px #ccc;

    .cen-title {
      height: 40px;
      p {
        font-size: 16px;
      }
    }
    .text-list {
      width: 312px;
      height: 80px;
      border-top: 2px solid #ddd;
      // margin: 0 auto;
      display: flex;
      justify-content: space-around;
      li {
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;
        a {
          height: 100%;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-evenly;
        }
        &:hover {
          //   针对a标签移动端高亮
          -webkit-tap-highlight-color: transparent;
        }
        i {
          font-size: 26px;
          color: #646464;
        }
        span {
          font-size: 12px;
         
        }
      }
    }
  }
}
// 功能模块
.cen-fun {
  > div {
    width: 312px;
    height: 60px;
    padding: 20px 15px;
    margin: 16px auto;
    background: rgb(255, 255, 255);
    border-radius: 5px;
    box-shadow: 0 0 3px #ccc;

    > ul {
      display: flex;
      justify-content: space-around;
      > li {
        height: 60px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;
        i {
          font-size: 26px;
          color: #646464;
        }
        span {
          font-size: 12px;
        }
      }
    }
  }
}
.bgCor{
  color: rgb(255, 63, 63);
}
</style>